<template>
  <div>
    <p class="pyq_img" @click="makeQRCode()">点击分享朋友圈</p>
    <div v-if="qrUrl">
      <canvas id="QRCode_header" style="width: 180px; height: 180px"></canvas>
      <div class="bd_weixin_popup_foot">
        打开微信，点击底部的“发现”，<br />使用“扫一扫”即可将网页分享至朋友圈。
      </div>
    </div>
  </div>
</template>

<script>
import QRCode from "qrcode"; //引入生成二维码插件
export default {
  data() {
    return { qrUrl: "" };
  },
  methods: {
    makeQRCode() {
      this.$nextTick(() => {
        console.log("点击");
        // var path = window.location.href; //获取页面的链接
        var path = "http://www.gshcwtg.cn/system/notificationDetail/369";
        //生成的二维码为URL地址js
        this.qrUrl = path;
        let opts = {
          errorCorrectionLevel: "H", //容错级别
          type: "image/png", //生成的二维码类型
          quality: 0.3, //二维码质量
          margin: 0, //二维码留白边距
          width: 180, //宽
          height: 180, //高
          text: path, //二维码内容
          color: {
            dark: "#333333", //前景色
            light: "#fff", //背景色
          },
        };
        let msg = document.getElementById("QRCode_header");

        // 将获取到的数据（val）画到msg（canvas）上
        QRCode.toCanvas(msg, this.qrUrl, opts, function (error) {
          if (error) {
            console.log("二维码加载失败", error);
          }
        });
        console.log(msg, "获取页面的链接");
      });
    },
  },
};
</script>

<style scoped>
.pyq_img {
  width: 50px;
  height: 50px;
  position: fixed;
  top: 180px;
  right: 20px;
  z-index: 50000;
  text-align: center;
}
.pyq_img img {
  width: 100%;
  height: 100%;
  cursor: pointer;
}
</style>